<template>
	<el-dialog v-model="props.show" title="账户入金" width="600" top="20vh" close-icon="CloseBold" @close="closeEvent">
		<template #default>
			<div>
				<p class="mb-10px text-#86909C text-14px">通过以下方式快速为您的资金账户充值</p>
				<template v-for="(item, index) in list" :key="index">
					<div class="flex 
				 items-center mb-20px p-20px border-1px border-solid border-#E5E6EB rounded-10px box-border cursor-pointer"
				 v-if="showMoreItems || index < 3">
						<div class="mr-20px flex items-center justify-center">
							<img :src="item.icon" alt="">
						</div>
						<div>
							<p class="text-#20232A text-18px mb-10px">{{ item.title }}</p>
							<p class="text-#86909C text-14px">{{ item.desc }}</p>
						</div>
					</div>
				</template>

				<p class="flex justify-center text-#114CEE text-14px cursor-pointer" @click="showMoreItems = !showMoreItems">
					{{ showMoreItems ? '收起' :'查看更多' }}
				</p>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	show: boolean
}

const props = defineProps<IProps>();

const emit = defineEmits(['close'])

const showMoreItems = ref<boolean>(false);
const closeEvent = () => {
	emit('close', false)
}

const list = ref<any[]>([
	{
		icon: "/financing/deposit-1.svg",
		title: "划转",
		desc: "划转资金至资金账户"
	},
	{
		icon: "/financing/deposit-2.svg",
		title: "充值USDT",
		desc: "获取 BTC、ETH 或其他币种的充值地址，并通过区块链充值"
	},
	{
		icon: "/financing/deposit-3.svg",
		title: "C2C交易",
		desc: "点对点交易，价格从优，支持多种本地支付方式。"
	},
	{
		icon: "/financing/deposit-4.svg",
		title: "兑换USDT",
		desc: "将资产兑换为其他货币最简单的方式"
	},
	{
		icon: "/financing/deposit-5.svg",
		title: "USDT收款",
		desc: "0手续费通过其他欧神用户的欧神支付或二维码接收加密货币"
	}
])
</script>
<style lang="scss" scoped></style>
